<template>
    <div class="header_container">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in $route.meta.navpath" :key="index">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown @command="handleCommand" menu-align='start'>
            <img :src="url" class="avator">
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="home">首页</el-dropdown-item>
                <el-dropdown-item command="signout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                url: 'https://tse2-mm.cn.bing.net/th?id=OIP.QJUIg5vW91xrjmZqLKjD9gHaHa&w=195&h=195&c=7&o=5&dpr=2&pid=1.7'
                // baseImgPath,
            }
        },
        created() {
            // if (!this.adminInfo.id) {
            // 	this.getAdminData()
            // }
        },
        computed: {
            // ...mapState(['adminInfo']),
        },
        methods: {
            // ...mapActions(['getAdminData']),
            async handleCommand(command) {
                if (command == 'home') {
                    this.$router.push('/home');
                } else if (command == 'signout') {
                    localStorage.clear()
                    this.$router.push("/")
                    // const res = await signout()
                    // if (res.status == 1) {
                    //     this.$message({
                    //         type: 'success',
                    //         message: '退出成功'
                    //     });
                    //     this.$router.push('/');
                    // } else {
                    //     this.$message({
                    //         type: 'error',
                    //         message: res.message
                    //     });
                    // }
                }
            },
        }
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .header_container {
        background-color: #EFF2F7;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
    }

    .avator {
        .wh(36px, 36px);
        border-radius: 50%;
        margin-right: 37px;
    }

    .el-dropdown-menu__item {
        text-align: center;
    }
</style>
